<template>
	<view class="container">
		<!-- 搜索框 -->
		<view class="search-container">
			<view class="search-box">
				<!-- 搜索图标 -->
				<uni-icons type="search" size="18" color="#999"></uni-icons>
				<!-- 输入框 -->
				<input class="search-input" v-model="searchText" placeholder="请输入搜索内容"
					placeholder-class="placeholder-style" @confirm="handleSearch" />
				<!-- 搜索按钮 -->
				<view class="search-btn" @click="handleSearch">
					搜索
				</view>
			</view>
		</view>

		<!-- 排序栏 -->
		<view class="sort-bar">
			<view class="sort-item" v-for="item in sortOptions" :key="item.value" @click="changeSort(item.value)">
				<text>{{ item.label }}</text>
				<view class="sort-arrows">
					<text :class="['arrow', {
              active: sortField === item.value && sortOrder === 'asc'
            }]">▲</text>
					<text :class="['arrow', {
              active: sortField === item.value && sortOrder === 'desc'
            }]">▼</text>
				</view>
			</view>
		</view>
		<!-- 搜索结果 -->
		<scroll-view class="result-list" scroll-y>
			<seele-goodsdetail :data='datobj'></seele-goodsdetail>
		</scroll-view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				datobj: {},
				scanner: '',
				pages: 1,
				longitude: '', //经度
				latitude: '', //维度
				month_order: null, //月销
				score_order: null, // 评分
				distance_order: null, // 距离
				per_order: null, // 人均
				searchText: '',
				sortField: 'recommend', // 当前排序字段
				sortOrder: 'desc', // 当前排序顺序
				sortOptions: [{
						label: '月销',
						value: 'yx'
					},
					{
						label: '评分',
						value: 'pf'
					},
					{
						label: '距离',
						value: 'jl'
					},
					{
						label: '人均',
						value: 'rj'
					}
				],
				resultList: [
					// 模拟数据
					{
						image: '/static/logo.png',
						description: '示例内容1',
						rating: 4.8,
						distance: 1.2
					}
				]
			}
		},
		computed: {
			...mapState(['seele']),
			sortedList() {
				return [...this.resultList].sort((a, b) => {
					let valueA, valueB
					switch (this.sortField) {
						case 'rating':
							valueA = a.rating
							valueB = b.rating
							break
						case 'distance':
							valueA = a.distance
							valueB = b.distance
							break
						default:
							return 0 // 推荐排序保持原始顺序
					}

					if (this.sortOrder === 'asc') {
						return valueA - valueB
					} else {
						return valueB - valueA
					}
				})
			}
		},
		onLoad() {
			this.$store.dispatch('seele/loadNearList', {});
		},
		created() {
			this.init()
		},
		methods: {
			handleSearch() {
				// 这里实际应调用搜索接口
				console.log('搜索：', this.searchText)
				this.$store.commit("seele/setNearListKeywords", this.searchText)
				this.$store.dispatch("seele/loadNearList", {})
			},
			changeSort(field) {
				if (this.sortField === field) {
					// 切换排序顺序
					this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc'
					if (field == 'yx') {
						if (this.month_order != 'asc') {
							this.month_order = "asc"
						} else {
							this.month_order = "desc"
						}
						this.init()
					}
					if (field == 'pf') {
						if (this.score_order != 'asc') {
							this.score_order = "asc"
						} else {
							this.score_order = "desc"
						}
						this.init()
					}
					if (field == 'jl') {
						if (this.distance_order != 'asc') {
							this.distance_order = "asc"
						} else {
							this.distance_order = "desc"
						}
						this.init()
					}
					if (field == 'rj') {
						if (this.per_order != 'asc') {
							this.per_order = "asc"
						} else {
							this.per_order = "desc"
						}
						this.init()
					}
				} else {
					// 切换排序字段并重置为降序
					this.sortField = field
					this.sortOrder = 'desc'
				}
			},
			init() {
				let that = this; // 保存 Vue 组件实例的引用
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						// 将经纬度赋值给组件的 data
						that.latitude = res.latitude;
						that.longitude = res.longitude;
						console.log('当前位置的经度：' + that.longitude);
						console.log('当前位置的纬度：' + that.latitude);
						// 在获取到经纬度后发起网络请求
						uni.request({
							url: '/wanlshop/store/index', // 仅为示例，并非真实接口地址
							method: 'post',
							data: {
								lng: that.longitude,
								lat: that.latitude,
								page: that.pages,
								keword: that.scanner,
								month_order: that.month_order||'',
								score_order: that.score_order||'',
								distance_order: that.distance_order||'',
								per_order: that.per_order||'',
							},
							success: (res) => {
								console.log(res.data, "请求到的数据");
								that.datobj = res.data


							},
							fail: (err) => {
								console.error('请求失败：', err);
							}
						});
					},
					fail: (err) => {
						console.error('获取位置失败：', err);
					}
				});
			}
		},

	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 10rpx;
	}

	.search-container {
		padding: 20rpx 0;
		padding-bottom: 0;
		margin-bottom: 10rpx;
	}

	.search-box {
		position: relative;
		height: 80rpx;
		background: #ffffff;
		border-radius: 40rpx;
		border: 1rpx solid #ddd;
		display: flex;
		align-items: center;
		padding: 0 10rpx 0 30rpx;
		border-color: #FB4C2D;
	}

	.search-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}

	.search-input {
		flex: 1;
		height: 100%;
		font-size: 28rpx;
		color: #333;
	}

	.placeholder-style {
		color: #999;
	}

	.search-btn {
		padding: 20rpx 36rpx;
		border-radius: 25px;
		font-size: 28rpx;
		color: white;
		background-color: #FB4C2D;
		line-height: 1;

	}

	.sort-bar {
		display: flex;
		justify-content: space-around;
		margin-bottom: 30rpx;
	}

	.sort-item {
		display: flex;
		align-items: center;
		padding: 15rpx 30rpx;
	}

	.sort-arrows {
		display: flex;
		flex-direction: column;
		margin-left: 10rpx;
	}

	.arrow {
		font-size: 20rpx;
		color: #ccc;
		line-height: 0.8;
	}

	.arrow.active {
		color: #7B7B7B;
	}

	.result-list {
		height: calc(100vh - 240rpx);
	}
</style>